<template>
  <el-container>

    <el-header style="width:80% ;padding-left: 45%">
      <el-steps :active="1" class="font-center">
        <el-step title="预约选择座位" description=""></el-step>
      </el-steps>
    </el-header>

      <el-main>
          <el-row class="border-styles">
            <el-col :span="6" >
                <img :src="fImg"
                     class="picture-style">
            </el-col>
            <el-col :span="18" >
                <el-row style="font-size: 27px ;color: white">
                  <el-col style="margin: 1% 1% 1% 1%">影片名：{{fname}}</el-col>
                  <el-col style="margin: 1%">上映：{{fDay}}</el-col>
                  <el-col style="margin: 1%">片长：{{fTime}} 分钟</el-col>
                  <el-col style="margin: 1%">影厅： {{hallId}}号 厅</el-col>
                  <el-col style="margin: 1%">票价： {{fPrice}}元</el-col>
                </el-row>
            </el-col>
          </el-row>

        <!--示意图标题-->
          <el-row class="title">
            <el-col :span="24" >
              <p style="margin-left: 41%" > {{hallId}}号厅 示意图</p>
            </el-col>
          </el-row>

        <!--示意图具体实现-->
          <el-row  >
            <el-col :span="24">
              <el-row class="border-base">
                    <el-col style="text-align: center">
                      <img src="/static/seat/screen.png">
                      <el-divider></el-divider>
                    </el-col>

                    <el-col>
                      <el-row v-for="(item,index) in line" :key="index"  style="text-align: center">
                        <el-col :offset="1" :span="1"   style="margin-top: 2%">#{{index+1}}</el-col>
                        <el-col :span="19" >
                          <el-row>
                            <ul>
                              <li v-for="i in cols" :key="i" >
                                <img  v-if="i==3"  src="/static/seat/seat_block.png">
                                <img  v-else-if="i==10"  src="/static/seat/seat_block.png">
                                <img  v-else :src="states[calc_num(index,i)]==0?imgurl[0]:states[calc_num(index,i)]==1? imgurl[1]:imgurl[2]"
                                      v-model="states[calc_num(index,i)]"  @click="click_seat($event,index,i ) ">
                              </li>
                            </ul>
                          </el-row>
                        </el-col>
                        <el-col :offset="1" :span="2" style="margin-top: 2%" >#{{index+1}}</el-col>
                      </el-row>
                    </el-col>
              </el-row>
            </el-col>
            <!-- 图示-->
            <el-col class="border-base" style="margin-top: 1%">
              <div style="padding-left: 43%;font-size:26px" class="title-base">选座座位图示 </div>
              <div style="float: left;margin-left: 28%;margin-top:2px">可选座位：<img :src="imgurl[0]"></div>
              <div style="float: left;margin-left: 6%;margin-top:2px">已选座位：<img :src="imgurl[1]"></div>
              <div style="float: left;margin-left: 6%;margin-top:2px">已预约：<img :src="imgurl[2]"></div>
            </el-col>
            <!--选座-->
            <el-col class="border-base" style="margin-top: 1%">
              <div style="padding-left: 45%;font-size:26px" class="title-base">已预约座位 </div>
              <div style="text-align: center">
              <el-tag v-for="item in nums" :key="item" class="labstyle" type="success"  >
                {{ parseInt(item%(cols-2))==0?parseInt(item/(cols-2) ):parseInt(item/(cols-2)+1) }}排{{item%(cols-2)==0?(cols-2):item%(cols-2)}}列
              </el-tag>
              </div>
            </el-col>
          </el-row>
      </el-main>
      <el-footer >
        <el-row  >
          <el-col :span="24" >
            <el-button class="midd" type="primary"  @click="toFilmCar">
              立即预约
            </el-button>
          </el-col>
        </el-row>
      </el-footer>
  </el-container>

</template>

<script>
    import Qs from 'qs'
    export default {
        name: "index",
        data(){
            return{
                line:7,//行
                cols:12,//列
                nums:[],//选座座位的序号
                states:[],//状态值数组
                stateType:3,//座位表状态
                imgurl:['/static/seat/seat_empty.png','/static/seat/seat_marked.png','/static/seat/seat_occupied.png'],
                hallId:'',//影厅号
                fid:'',//电影id
                sid:'',//放映id
                fname:'',//电影名
                fTime:'',//影片时长
                fDay : '',//上映时间       未整合
                fImg :'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',//海报图片地址
                fPrice:'',//电影价格
                Buyseat:[],//已经占用的座位
                uid:''//用户id
            }
        },
        //async 用于声明一个函数是异步的，
        //await 用于声明在一个异步函数中 等待语句执行完毕。也就是说await只能在async函数中使用
        created() {

           var datas=this.$route.params.nfilm;
           var data1=this.$route.params.showtable;
          console.log("datas");
          console.log(datas);
            console.log("data1");
            console.log(data1);
           if(datas!=null&&data1!=null){
                this.fname=datas.nfName;
                this.hallId=data1.sPlayHall;
                this.fTime=datas.nfLongtime;
                this.fPrice=datas.nfPrice;
                this.fImg=datas.nfImg;
                this.sid=data1.sId;
                this.fid=datas.nfId;
                this.stateType=3;
                this.fDay=data1.sDay;
                //后期修改参数

                this.uid=1;


            }
            if(this.sid==""||this.fid==""||this.hallId==""){
                this.$router.push("/index");
            }
            this.init_state();
        },
        methods:{

            //状态值初始化
            //async 用于声明一个函数是异步的，
            //await 用于声明在一个异步函数中 等待语句执行完毕。也就是说await只能在async函数中使用
            // /api/seat/querySeatById/{tid}/{stateType}/{Hall_id}
            async init_state(){
                //init_state:async function(){
                var vm=this;
                await this.axios({
                    url:"http://localhost:80/api/seat/querySeatById/"+this.sid+"/"+this.stateType+"/"+this.hallId
                }).then(function (res) {
                    if(res.data.success){
                        vm.Buyseat=res.data.data;
                    }
                }).catch(function () {
                    console.log("获取参数异常");
                });
                //console.log("an ..."+vm.an);
                //初始化状态值
                var len=this.line*(this.cols-2);
                for (var i=0;i<=len;i++) {
                    this.states.push(0);//
                }
                //根据数据库修改状态值
                for(var j=0;j<vm.Buyseat.length;j++){
                    this.states[this.Buyseat[j]]=2;
                }
                //console.log("123 "+this.states);
            },

            //点击座位
            click_seat(event,index,i){
                var num=this.calc_num(index,i);
                var st=this.states[num];
                //console.log(event);
                //console.log(event.target.src);
                if(st==0){
                    event.target.src=this.imgurl[st+1];
                    //event.target.dataset.prototype.src=;
                    this.states[num]+=1;
                    this.nums.push(num);
                }
                else if(st==1){
                    event.target.src=this.imgurl[st-1];
                     this.states[num]-=1;
                     var index =this.nums.indexOf(num);
                     this.nums.splice(index, 1);
                }
                //用于已修改选座位置
                this.nums.sort(function (a,b) {
                      return a-b;
                });
                //检查选取的座位号
                console.log(this.nums);

            },
            //计算座位号
            calc_num(row,col){
                if(col<=2)
                    return row*10+col;
                else if(col>2&&col<10)
                    return row*10+col-1;
                else
                    return row*10+col-2;
            },

            /*页面跳转*/
            //返回上一页
            toback(){
                this.$route.go(-1);//返回上一层
            },

            toFilmCar(){//存储到购物车，并跳转界面
              var seat = '';
              for(var i = 0;i<this.nums.length;i++){

                var row = parseInt((this.nums)[i]%(12-2))==0?parseInt((this.nums)[i]/(12-2) ):parseInt((this.nums)[i]/(12-2)+1)+'排';
                var col = (this.nums)[i]%(10)==0?(10):(this.nums)[i]%(10)+'座'  ;

                seat = seat+row+ col+','
              }
              console.log("seat的值为"+seat);
                var seatInfoVO={
                    nums:seat,
                    hallId:this.hallId,
                    stateType:this.stateType,
                    nf_id:this.fid,
                    sid:this.sid,
                    uid:this.uid
                }
              console.log("seatInfoVO的值为"+seatInfoVO)
                var vm =this;

                if(this.nums==""){
                    this.$message.error('请选择座位');
                }
                else{
                    this.axios({
                        method:'post',
                        url:"http://localhost:80/api/cart/addcart",
                      transformRequest: [function (data) {
                        return Qs.stringify(data)
                      }],
                        data: seatInfoVO
                    }).then(function (res) {

                        if(res.data.success){
                           // console.log(res.data);
                            vm.$message({
                                message: '加入购物车成功',
                                type: 'success',
                                center:true
                            });
                        }
                        //setTimeout(5000,vm.$router.push("/index"));
                    }).catch(function () {
                       // console.log("获取参数异常");
                    })

                      console.log(this.nums);

                     seatInfoVO={
                        nums:JSON.stringify(this.nums),
                        hallId:this.hallId,
                        stateType:this.stateType,
                        nf_id:this.fid,
                        sid:this.sid,
                        uid:this.uid
                    }


                    this.axios({
                        method:'post',
                        url:"http://localhost:80/api/seat/addseats",
                        data: seatInfoVO
                    }).then(function (res) {

                        if(res.data.success){
                            // console.log(res.data);
                            vm.$message({
                                message: '座位预定成功',
                                type: 'success',
                                center:true
                            });
                        }
                       // setTimeout(5000,vm.$router.push("/index"));
                    }).catch(function () {
                         console.log("获取参数异常");
                    })


                }

            }


        }
    }
</script>

<style scoped>
  .bd{
    border: 1px solid red;
  }
  .bda{
    border: 1px solid blue;
  }
  .bdd{
    border: 1px solid green;
  }
  .picture-style{
    margin-left: 18%;
    margin-top: -1%;
    box-shadow: #DCDFE6 3px 2px;
    border:2px solid white;
    width: 250px;
    height: 300px;
  }
  .border-styles{
    border:1px solid grey;
    padding-top:1%;
    margin-top:1%;
    box-shadow: grey 1px 1px;
    background:url("/static/moviePic/picback-grand.jpg");
    background-repeat: no-repeat;
    background-size: 100% 96%;
  }
  .title{
    background-color: #666666;
    border:1px solid grey;
    padding-top:1%;
    margin-top:1%;
    box-shadow: grey 1px 1px;
    color: #DCDFE6;
  }
  .title p{
    font-size: 26px;
  }
  .border-base{
    border: 1px solid grey;
    box-shadow: grey 1px 1px;

  }
  .title-base{
    background-color: #666666;
    border:1px solid grey;
    box-shadow: grey 1px 1px;
    color: #DCDFE6;
  }
  li {
    display: inline;
  }
  li img{
    margin-left: 1%;
  }
  .midd{
    margin-left: 45%;
  }
  .labstyle{
   font-size: x-large;
    margin: 1%;
  }
</style>

<!--无需代码-->

<!--//状态值初始化-->
<!--// async init_state(){-->
<!--//     var len=this.line*(this.cols-2);-->
<!--//-->
<!--//     for (var i=0;i<=len;i++) {-->
<!--//         this.states.push(0);-->
<!--//     }-->
<!--//     console.log("123 "+this.states);-->
<!--// },-->

<!--          <el-col :span="12" >-->
<!--            &lt;!&ndash;                <el-tag style="margin-left: 20%;" size="medium"  effect="dark">购票 </el-tag>&ndash;&gt;-->
<!--            <el-button style="margin-left: 20%" type="primary" @click="">-->
<!--              加入购物车-->
<!--            </el-button>-->
<!--          </el-col>-->

<!--      <el-header style="padding-top:2%">-->
<!--        <el-row  >-->
<!--          <el-col :span="12" >-->
<!--                <el-tag style="margin-left: 20%;" size="medium"  effect="dark">购票 </el-tag>-->
<!--            <el-button style="margin-left: 20%" type="primary" icon="el-icon-s-ticket">购票</el-button>-->
<!--          </el-col>-->
<!--          <el-col :span="12" >-->
<!--            <el-button style="margin-left: 40%" type="info"  @Click="toback">-->
<!--              <img src="/static/seat/back.png"  />-->
<!--              返回-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-header>-->
